<script setup lang="ts">
import 'leaflet/dist/leaflet.css'
import { onMounted, ref } from 'vue'
import { globalDataInst } from '../js/global-data'
import FilterHeader from '@/components/FilterHeader.vue'
import FilterMain from '@/components/FilterMain.vue'
import LocationBtn from '@/components/LocationBtn.vue'
import SelectedArea from '@/components/SelectedArea.vue'
import { getMapAnchorList } from '@/js/api'
import { useHomeStore } from '@/stores/home'
import { storeToRefs } from 'pinia'
import GuideMarkerUI from '@/components/GuideMarkerUI.vue'
import SearchView from '@/components/SearchView.vue'
import { MapManager } from '@/js/map-manager'
import { useRoute } from 'vue-router'
const route = useRoute()
const store = useHomeStore()
const { setMapAnchorList, setMapId } = store
const { searchFlag, mapId } = storeToRefs(store)

//配置地图ID
setMapId((route.params.id ??= '') !== '' ? (route.params.id + '') : 'ys')

console.log("🚀 ~ mapId:", route.params.id + '')

onMounted(() => {
  init()
})
async function initMapAnchorList() {
  const res = await getMapAnchorList(mapId.value ?? 'ys')
  setMapAnchorList(res.data)
}
async function init() {
  await initMapAnchorList()
  globalDataInst.mapManager = new MapManager('map', mapId.value)
  globalDataInst.mapManager.setMapAnchorList(store.mapAnchorList)
  globalDataInst.mapManager.renderAreaNames()
  globalDataInst.mapManager.enableClickDebug()
}
function gotoSearch() {
  searchFlag.value = true
}
</script>

<template>
  <div class="home-view">
    <div class="map-layer" id="map"></div>
    <div class="ui-layer" v-show="!searchFlag">
      <div class="filter-container">
        <div class="filter-content">
          <!-- <div class="close-btn">
            <div class="close-icon"></div>
          </div> -->
          <LocationBtn />
          <SelectedArea />
          <FilterHeader />
          <div class="search-container" @click="gotoSearch">
            <div class="search-icon"></div>
            <div class="search-tip">搜索</div>
          </div>
          <FilterMain />
        </div>
      </div>
      <GuideMarkerUI />
    </div>
    <div class="ui-layer" v-show="searchFlag">
      <div class="filter-container">
        <div class="filter-content">
          <SearchView />
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="less" scoped>
.home-view {
  position: relative;
  width: 100vw;
  height: calc(100vh - 0.6rem);

  .map-layer {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
  }

  .ui-layer {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    z-index: 2;

    .filter-container {
      position: absolute;
      left: 0;
      top: 0;
      z-index: 3;
      width: 415px;
      height: 100%;
      padding: 20px;

      .filter-content {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;
        border-radius: 12px;
        background-color: #3b4354;
        overflow: hidden;

        .close-btn {
          position: absolute;
          top: 32px;
          right: -44px;
          width: 64px;
          height: 40px;
          background-image: url('../assets/images/ui/close-bg.png');
          background-size: cover;
          display: flex;
          align-items: center;
          box-sizing: border-box;
          padding-left: 18px;

          .close-icon {
            width: 24px;
            height: 24px;
            background-image: url('../assets/images/ui/close-icon.png');
            background-size: cover;
          }
        }

        .search-container {
          width: 355px;
          height: 32px;
          display: flex;
          align-items: center;
          border-radius: 22px;
          background-color: #323947;
          color: #9b9c9f;
          font-size: 12px;
          cursor: pointer;
          box-sizing: border-box;
          padding-left: 10px;
          margin: 10px auto;

          .search-icon {
            margin-right: 5px;
            width: 16px;
            height: 16px;
            background-image: url('../assets/images/ui/search-icon.png');
            background-size: cover;
          }
        }
      }
    }
  }
}
</style>
